<template>
	<view v-if="isShow" class="toast_content" >
		<text :class="[position]" :style="{'background-color':backgroundColor,'color':color,'font-size':size+'px'}">
			{{msg}}
		</text>
	</view>
</template>
<script>
	export default {
		props:{
			position:{
				default:'bottom'
			},
			backgroundColor:{
				default:'rgba(0,0,0,.55)'
			},
			color:{
				default:'#FFF'
			},
			size:{
				default:'16'
			}
		},
		data() {
			return {
				msg:'',
				isShow:false,
				time:null
			}
		},
		methods: {
			showTips(item){
				if(this.isShow){
					clearTimeout(this.time)
				}
				this.msg = item.msg
				this.isShow = true
				this.time = setTimeout(() => {
					this.isShow = false
					clearTimeout(this.time)
				},item.duration || 2000)
				
			}
		},
		mounted() {}
	}
</script>
<style lang="scss" scoped>
	.toast_content{
		text{
			position: fixed;
			box-sizing: border-box;
			box-sizing: border-box;
			padding: 10px 15px;
			border-radius: 4px;
			&.top{
				top: 0;
				left: 0;
				right: 0;
				border-radius: 0;
				z-index: 99999;
				text-align: center;
			}
			&.bottom{
				bottom: 100px;
				left: 50%;
				transform: translateX(-50%);
				max-width: 300px;
			}
			&.center{
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				max-width: 400px;
			}
		}
	}
</style>
